<!DOCTYPE HTML >
<html>
    <head>
        <title>后代选择器</title>
        <meta charset='utf-8'>
        <style type='text/css'>
            div span
            {border:1px blue solid;}
        </style>
        <link rel='stylesheet' type='text/css' href='../css/c1.css'>
    </head>
    <body>
    <div class='title'>后代选择器</div>
    后代选择器实际上是使用：多个选择器加上中间的空格来找到具体的要控制标签；
    <div class='title'>代码示例</div>
    <div class='code'>
   <pre>
         &lt;style type='text/css'&gt;
           div span {
               border:1px blue solid;
       }
          &lt;/style&gt;
        &lt;div class='test'&gt;
       &lt;span&gt;
       测试代码
       &lt;/span&gt;
       &lt;/div&gt;
   </pre>
    </div>
    <div class='title'>代码效果</div>
    <div class='result'>
    <div class='test'>
        <span>测试代码</span>
    </div></div>
    </body>
</html>